<template>
  <div class="overview-request">
    <div class="overview-request-search">
      <div class="tit">请车执行概览</div>
      <div>
        <el-select v-model="productOrgIds" placeholder="请选择" @change="getTopData">
          <el-option
            v-for="item in productOrgOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="overview-request-content">
      <div class="overview-request-center">
        <div class="overview-center-left">
          <div class="left-top">
            <div class="select-box">
              <el-select v-model="goodsId" placeholder="请选择" @change="getTopData">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="left-top-con">
              <div ref="chartPie" :data-value="pleaseCarAnnularChartVO.proportion" class="chart-pie"></div>
              <div class="progress-con">
                <div class="progress-item"><span class="span-text">计划请车数：</span>
                  <el-progress :percentage="pleaseCarAnnularChartVO.successNum" class="progress-bar" color="#46BFEA"
                               define-back-color="#fff"></el-progress>
                </div>
                <div class="progress-item"><span class="span-text">承认车数：</span>
                  <el-progress :percentage="pleaseCarAnnularChartVO.executeCarNum" class="progress-bar" color="#46BFEA"
                               define-back-color="#fff"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <div class="left-bottom">
            <div class="sub-title">本月请车趋势</div>
            <div ref="chartLine" class="chart-line"></div>
          </div>
        </div>
        <div class="overview-request-right">
          <div class="custom-header">
            <div>
              <el-button circle icon="el-icon-arrow-left" size="mini" style="background: #daf2fb;color:#46BFEA"
                         @click="changeMonth('prev')"></el-button>
              <span class="now-month">{{ curMonth }}</span>
              <el-button :disabled="disabledNext" circle icon="el-icon-arrow-right" size="mini"
                         style="background: #daf2fb;color:#46BFEA" @click="changeMonth('next')"></el-button>
            </div>
          </div>
          <el-calendar v-model="calendarValue" class="calendar" size="small">
            <template
              #dateCell="{data}">
              <div :class="data.isSelected ? 'is-selected' : ''" class="day-item" @click="calendarChange(data)">
                <div class="day-value">{{ getDay(data.day) }}</div>
                <div v-show="getCount(data.day)" class="count-day">{{ getCount(data.day) }}</div>
              </div>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
    <div class="overview-request-bottom">
      <div class="search-box">
        <el-tabs v-model="activeTab" class="tab-list" @tab-click="tabChange">
          <el-tab-pane label="请车数统计" name="1"></el-tab-pane>
          <el-tab-pane label="运输量统计" name="2"></el-tab-pane>
        </el-tabs>
        <div class="date-box">
          <el-date-picker
            v-model="dateValue"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            range-separator="~"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
            @change="timeChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table-box">
        <div class="arrow-img arrow-left">
          <img v-show="currentPage!==0" alt="" src="./images/arrow.png" @click="prevTable">
        </div>
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="发站"
            prop="originalStationName"
            width="180">
          </el-table-column>
          <el-table-column
            label="产品统计维度"
            width="180">
            <template>
              <div>计划请车数</div>
              <div>承认车数</div>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item,index) in displayedColumns"
            :key="index"
            :label="item.label"
            :prop="'data.' + index"
         >
            <template slot-scope="scope">
              <div>
                <el-progress
                  :percentage="getRateCount([scope.row.data[index]?.successNum,scope.row.data[index]?.executeCarNum],0)"
                  :format="()=> `${scope.row.data[index]?.successNum}车`"
                  class="progress-bar"
                  color="#98DBF3"
                  define-back-color="#f1f1f1">
                </el-progress>
              </div>
              <div>
                <el-progress
                  :percentage="getRateCount([scope.row.data[index]?.successNum,scope.row.data[index]?.executeCarNum],1)"
                  :format="()=> `${scope.row.data[index]?.executeCarNum}车`"
                  class="progress-bar"
                  color="#51EAC4"
                  define-back-color="#f1f1f1">
                </el-progress>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="arrow-img arrow-right"><img v-show="currentPage!==columnNames.length-1" alt=""
                                                src="./images/arrow.png" @click="nextTable"></div>
      </div>
    </div>
  </div>
</template>
<!--请车概览-->
<script>
import moment from "moment"
import _ from "lodash";
import * as echarts from 'echarts'
import {getLineOptions, getRingOptions} from '@/views/overviewRequest/chartOption'
import {getFirstAndLastDayTimestamps, getRateCount, sliceYear} from '@/views/overviewRequest/hooks'
export default {
  name: "overviewRequest",
  data () {
    return {
      productOrgOptions: [
        {
          value: '123',
          label: '生产组织1'
        },
        {
          value: '456',
          label: '生产组织2'
        },
        {
          value: '789',
          label: '生产组织3'
        }
      ],
      productOrgIds: "",
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      goodsId: '',
      calendarValue: new Date(),
      curMonth: moment().format('MM'),
      pleaseCarAnnularChartVO:{
        executeCarNum:0,
        successNum:0,
        proportion:0
      },
      disabledNext: false,
      timeList: [
        {
          time: '2024-11-10',
          value: 10
        },
        {
          time: '2024-11-11',
          value: 20
        },
        {
          time: '2024-11-12',
          value: 30
        },
      ],
      activeTab: "1",
      dateValue: [],
      tableData: [],
      staticTableData: [],
      columnNames:[],
      displayedColumns:[],
      currentPage: 0,
      tableLoading: false
    }
  },
  computed: {},
  mounted () {
  },
  watch: {
    calendarValue (nVal) {
      console.log('calendarValue', moment(nVal).format('YYYY-MM-DD'))
    }
  },
  methods: {
    getRateCount,
    getDay (dateString) {
      const dateParts = dateString.split('-');
      return dateParts[2]
    },
    getCount (dateString) {
      const timeList = {}
      this.timeList.map(item => {
        timeList[item.carDate] = item.executeCarNum
      })
      return timeList[dateString]
    },
    changeMonth (type) {
      const date = moment(this.calendarValue, "YYYY-MM-DD");
      this.disabledNext = false
      if (type === 'prev') {
        const lastMonthDate = date.clone().subtract(1, 'months');
        this.calendarValue = lastMonthDate.format("YYYY-MM-DD")
      }
      if (type === 'next') {
        const nextMonthDate = date.clone().add(1, 'months');
        let cur = moment(this.calendarValue).format("YYYY-MM")
        let nextMonth = moment().format("YYYY-MM")
        if (moment(cur).isAfter(nextMonth) || nextMonth === cur) {
          this.disabledNext = true
          return
        } else {
          this.calendarValue = nextMonthDate.format("YYYY-MM-DD")
        }
      }
      this.curMonth = moment(this.calendarValue).format('MM')
      this.getTopData()
    },
    calendarChange (val) {
      let {executeCarNum}=this.timeList.find(item => item.carDate === val.day)
      this.pleaseCarAnnularChartVO.proportion=executeCarNum
      this.initChart1(executeCarNum)
    },
    async getTopData () {
      let timeRange = moment(this.calendarValue).format('YYYY-MM-DD')
      const params = {
        goodsId: this.goodsId,
        goodsName: "",
        productOrgIds: this.productOrgIds,
        timeRange: timeRange
      }
      let o = getFirstAndLastDayTimestamps(timeRange)
      try {
        const res = {
          "code": 1,
          "message": "操作成功",
          "requestId": "53556ed6e5d9bc1a",
          "result": {
            "executeCarNum": 0,
            "pleaseCarAnnularChartVO": {
              "executeCarNum": 48,
              "goodsName": "",
              "proportion": "85",
              "successNum": 150
            },
            "pleaseCarTrendVOS": [
              {
                "carDate": "2024-09-01",
                "executeCarNum": 50,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-02",
                "executeCarNum": 40,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-03",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-04",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-05",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-06",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-07",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-08",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-09",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-10",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-11",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-12",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-13",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-14",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-15",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-16",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-17",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-18",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-19",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-20",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-21",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-22",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-23",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-24",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-25",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-26",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-27",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-28",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-29",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              },
              {
                "carDate": "2024-09-30",
                "executeCarNum": 0,
                "proportion": "0%",
                "successNum": 0
              }
            ],
            "successNum": 0
          }
        }
        const {code,result}=res
        if(code!==1) return
        let {executeCarNum,successNum,proportion}=result.pleaseCarAnnularChartVO
        //环形图
        this.pleaseCarAnnularChartVO={
          ...result.pleaseCarAnnularChartVO,
          executeCarNum:getRateCount([executeCarNum,successNum],0),
          successNum:getRateCount([executeCarNum,successNum],1)
        }
        //日历
        this.timeList=result.pleaseCarTrendVOS
        this.initChart1(proportion)
        this.initChart2(result.pleaseCarTrendVOS)
      } catch (e) {

      } finally {

      }
      console.log('o', o)
      console.log('getTopData', params)
    },
    tabChange () {
      console.log('tabChange',this.activeTab)
      this.getBottomData()
    },
    timeChange(val){
      console.log('timeChange',val,this.dateValue)
    },
    async getBottomData () {
      const params={
        productOrgIds:this.productOrgIds,
        timeRange:this.dateValue
      }
      try {
        let res={
          "code": 1,
          "message": "操作成功",
          "requestId": "e49420791df11cbf",
          "result": {
            "福泉站": [
              {
                "executeCarNum": 10,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "19613",
                "originalStationName": "福泉站",
                "successNum": 20
              },
              {
                "executeCarNum": 30,
                "fourthClassName": "PPA",
                "originalStationCode": "19613",
                "originalStationName": "福泉站",
                "successNum": 40
              },
              {
                "executeCarNum": 50,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "19613",
                "originalStationName": "福泉站",
                "successNum": 60
              },
              {
                "executeCarNum": 70,
                "fourthClassName": "硫磺",
                "originalStationCode": "19613",
                "originalStationName": "福泉站",
                "successNum": 80
              },
              {
                "executeCarNum": 90,
                "fourthClassName": "原料煤",
                "originalStationCode": "19613",
                "originalStationName": "福泉站",
                "successNum": 100
              },
              {
                "executeCarNum": 110,
                "fourthClassName": "磷精矿",
                "originalStationCode": "19613",
                "originalStationName": "福泉站",
                "successNum": 120
              },
            ],
            "大水沟站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "47540",
                "originalStationName": "大水沟站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "47540",
                "originalStationName": "大水沟站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "47540",
                "originalStationName": "大水沟站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "47540",
                "originalStationName": "大水沟站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "47540",
                "originalStationName": "大水沟站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "47540",
                "originalStationName": "大水沟站",
                "successNum": 0
              }
            ],
            "中心站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "47543",
                "originalStationName": "中心站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "47543",
                "originalStationName": "中心站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "47543",
                "originalStationName": "中心站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "47543",
                "originalStationName": "中心站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "47543",
                "originalStationName": "中心站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "47543",
                "originalStationName": "中心站",
                "successNum": 0
              }
            ],
            "小寨坝站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "47390",
                "originalStationName": "小寨坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "47390",
                "originalStationName": "小寨坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "47390",
                "originalStationName": "小寨坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "47390",
                "originalStationName": "小寨坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "47390",
                "originalStationName": "小寨坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "47390",
                "originalStationName": "小寨坝站",
                "successNum": 0
              }
            ],
            "河市坝站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "29978",
                "originalStationName": "河市坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "29978",
                "originalStationName": "河市坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "29978",
                "originalStationName": "河市坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "29978",
                "originalStationName": "河市坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "29978",
                "originalStationName": "河市坝站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "29978",
                "originalStationName": "河市坝站",
                "successNum": 0
              }
            ],
            "蛟洋站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "35128",
                "originalStationName": "蛟洋站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "35128",
                "originalStationName": "蛟洋站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "35128",
                "originalStationName": "蛟洋站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "35128",
                "originalStationName": "蛟洋站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "35128",
                "originalStationName": "蛟洋站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "35128",
                "originalStationName": "蛟洋站",
                "successNum": 0
              }
            ],
            "金昌站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "41780",
                "originalStationName": "金昌站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "41780",
                "originalStationName": "金昌站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "41780",
                "originalStationName": "金昌站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "41780",
                "originalStationName": "金昌站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "41780",
                "originalStationName": "金昌站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "41780",
                "originalStationName": "金昌站",
                "successNum": 0
              }
            ],
            "牛场站": [
              {
                "executeCarNum": 0,
                "fourthClassName": "磷酸二铵",
                "originalStationCode": "222",
                "originalStationName": "牛场站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "PPA",
                "originalStationCode": "222",
                "originalStationName": "牛场站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "无水氟化氢",
                "originalStationCode": "222",
                "originalStationName": "牛场站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "硫磺",
                "originalStationCode": "222",
                "originalStationName": "牛场站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "原料煤",
                "originalStationCode": "222",
                "originalStationName": "牛场站",
                "successNum": 0
              },
              {
                "executeCarNum": 0,
                "fourthClassName": "磷精矿",
                "originalStationCode": "222",
                "originalStationName": "牛场站",
                "successNum": 0
              }
            ]
          }
        }
        let {result}=res
        let arr=[]
        for (const key in result) {
          arr.push({
            originalStationName: key,
            children:_.chunk(result[key],3)
          })
        }
        this.staticTable = arr
        let keys=Object.keys(result)
        let a=result[keys[0]].map(item=>({label: item.fourthClassName}))
        this.columnNames=_.chunk(a,3)
        this.updateTableData()
      } catch (e) {
        console.log('error',e)
      }
    },
    updateTableData() {
      this.displayedColumns = this.columnNames[this.currentPage];
      this.tableData = this.staticTable.map(item => {
        return {
          originalStationName: item.originalStationName,
          data: item.children[this.currentPage]
        }
      })
    },
    prevTable () {
      this.tableLoading = true
      setTimeout(() => {
        this.tableLoading = false
        this.currentPage--
        this.updateTableData()
      }, 500)
    },
    nextTable () {
      this.tableLoading = true
      setTimeout(() => {
        this.tableLoading = false
        this.currentPage++
        this.updateTableData()

      }, 500)
    },

    initChart1 (num) {
      const chartPie = echarts.init(this.$refs.chartPie)
      chartPie.setOption(getRingOptions(num))
      window.addEventListener('resize', function () {
        chartPie.resize()
      })
    },
    initChart2 (pleaseCarTrendVOS) {
      let xData=pleaseCarTrendVOS.map(item => item.carDate)
      let yData1=pleaseCarTrendVOS.map(item => item.successNum)
      let yData2=pleaseCarTrendVOS.map(item => item.executeCarNum)
      const chart = echarts.init(this.$refs.chartLine)
      chart.setOption(getLineOptions({xData:sliceYear(xData),yData1,yData2}))
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },

  }
}
</script>
<style lang="scss" scoped>
.overview-request {
  display: flex;
  flex-direction: column;
  //height: 100%;
  //overflow: auto;
  gap: 10px;

  .overview-request-search {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 45px;

    .tit {
      font-weight: bold;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .overview-request-content {
    width: 100%;
    display: flex;

    .overview-request-center {
      display: flex;
      width: 100%;
      gap: 10px;

      .overview-center-left {
        width: 40%;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .left-top {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 0 20px;
          box-sizing: border-box;
          background-color: #fff;

          .select-box {
            margin: 8px 0;
          }

          .left-top-con {
            flex: 1;
            display: flex;
            gap: 10px;

            .chart-pie {
              width: 40%;
              position: relative;

              &:after {
                content: attr(data-value);
                position: absolute;
                top: 50%;
                left: 50%;
                font-size: 20px;
                background-image: linear-gradient(to bottom, #35cdf3, #12e4a0);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent; /* 隐藏原始文本颜色 */
                transform: translate(-50%, -50%);
              }
            }

            .progress-con {
              flex: 1;
              display: flex;
              gap: 20px;
              flex-direction: column;
              justify-content: center;

              .progress-item {
                display: flex;

                .span-text {
                  color: #000000;
                  font-size: 14px;
                  font-weight: 500;
                  width: 120px;
                  text-align: right;
                }

                .progress-bar {
                  flex: 1;
                  width: auto;
                }
              }
            }
          }
        }

        .left-bottom {
          flex: 1;
          padding: 8px 20px;
          box-sizing: border-box;
          background-color: #fff;

          .sub-title {
            margin: 8px 0;
          }

          .chart-line {
            height: 100%;
          }
        }

      }

      .overview-request-right {
        width: 60%;
        background-color: #fff;
        position: relative;

        .custom-header {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 50px;
          background-color: #fff;
          z-index: 99;
          display: flex;
          justify-content: center;
          align-items: center;

          .now-month {
            margin: 0 10px;
            font-size: 18px;
          }
        }

        .calendar {
          height: 100%;

          .is-selected {
            background-color: #e3f5fc;
          }

          /deep/ .el-calendar__body {
            padding: 0 20px 10px;
          }

          /deep/ .el-calendar-table .el-calendar-day {
            height: 70px;
            padding: 0;
            border-radius: 10px;
            position: relative;

            .day-item {
              height: 100%;
            }

            .day-value {
              text-align: right;
              padding-right: 10px;
              padding-top: 10px;
            }

            .count-day {
              position: absolute;
              width: 100%;
              height: 40%;
              bottom: 0;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #FFF;
              background: #46BFEA;
            }
          }
        }
      }
    }
  }

  .overview-request-bottom {
    border: 1px solid red;
    background-color: #fff;
    padding: 10px 20px;

    .search-box {
      display: flex;

      .date-box {
        margin-left: 30px;
      }
    }

    .table-box {
      display: flex;

      .arrow-img {
        width: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;
        cursor: pointer;

        img {
          width: 36px;
          height: 36px;
        }
      }

      .arrow-left {
        transform: rotate(180deg);
        transform-origin: center;
      }
    }
  }
}
</style>